<template>
  <div>
    <h1 ref="h1">ref模板中用法</h1>
    <p ref="pm">vue的ref使用</p>
    <hr />
    <el-form ref="fm" />
  </div>
</template>

<script>
/**
 * 在模板中使用ref，我们都很清楚，它一般有两种使用场景
1. ref + 普通dom标签  获取真实dom对象
2. ref + 组件标签  获取组件实例对象
**实现步骤**
1. 使用ref函数传入null创建 ref对象 =>  `const 常量名称 = ref(null)`
2. 模板中通过定义ref属性等于1中创建的ref对象常量名称建立关联  =>  `<h1 ref="常量名称"></h1>`
3. setup函数中**必须返回**：`return {常量名称}`
4. 使用 => `常量名称.value`
 */
import { ref, onMounted } from 'vue'
import ElForm from './son.vue'
export default {
  components: {
    ElForm
  },
  setup () {
    // 获取h1元素dom对象
    const h1 = ref(null)

    // 获取form组件组件实例
    const fm = ref(null)

    onMounted(() => {
      console.log('组件挂载了获取：', h1.value, fm.value)
      h1.value.style.color = 'red'
      fm.value.validate(() => {
        console.log(456)
      })
    })
    return { h1, fm }
  },
  mounted () {
    console.log('vue2获取html元素：', this.$refs.pm)
  }
}
</script>

<style lang="scss" scoped>
</style>
